<template>
<div>
    <bread-crumb :crumbItems="crumbItems" :pageTitle="pageTitle"></bread-crumb>
    <Card :bordered="false" dis-hover>
        <!-- container start -->
        <div class="container page-wrap w1250">
            <div class="pro-detail">
                <div class="pro_show_img fl">
                    <Carousel v-model="value3" :autoplay="setting.autoplay" :autoplay-speed="setting.autoplaySpeed" :dots="setting.dots" :radius-dot="setting.radiusDot" :trigger="setting.trigger" :arrow="setting.arrow">
                        <CarouselItem v-for="(item, key) in warehouseImgs" :key="item.name">
                            <div class="demo-carousel">
                                <img :src="item.url">
                            </div>
                        </CarouselItem>
                    </Carousel>
                </div>
                <div class="pro-wz fl">
                    <h4>{{details.ChineseName}}</h4>
                    <ul>
                        <li>
                            <span>仓库地区：</span>{{details.Venue}}
                        </li>
                        <li>
                            <span>存储标准：</span>{{details.StorageType | StorageType}}
                        </li>
                        <li>
                            <span>仓库类型：</span>{{details.WareHouseType | WareHouseType}}
                        </li>
                        <li>
                            <span>结构：</span>{{details.BuildingStructure | BuildingStructure}}
                        </li>
                        <!-- <li>
                            <span>运输报价：</span>
                            <b>10.20元/件</b>
                        </li> -->
                        <li>
                            <span>总面积：</span>
                            <b>{{details.TotalAreaAge|| '暂无'}}㎡</b>
                            <span>可租面积：</span>
                            <b>{{details.CanRentedArea|| '暂无'}}㎡</b>
                            <span>起租面积：</span>
                            <b>{{details.Minleasedrea|| '暂无'}}㎡</b>
                        </li>
                        <li>
                            <span>租金：</span>
                            <b>{{details.LeasingPrice || '面议'}}/㎡/月</b>
                        </li>
                        <li>
                            <i class="icon-star"></i>
                            <i class="icon-star"></i>
                            <i class="icon-star-empty"></i>
                        </li>
                        <li>
                            <span>更新时间：</span>{{details.UPDATE_TIME | getYMD}} {{details.UPDATE_TIME | getHMS}}
                        </li>
                        <li v-show="false">
                            <div class="btn-group flexitem">
                                <a href="javascript:;">预约仓库</a>
                            </div>
                            <div class="btn-group flexitem">
                                <a href="javascript:;"><i class="iconfont icon-star-hollow"></i>关注仓库</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 仓库简介 -->
            <div class="demand-detail-content">
                <div class="demand-detail-title">
                    <b>仓库简介</b>
                </div>
                <dl class="recommend-detail-info displayflex">
                    <dt class="flexitem rela-img">
                        <img src="@/assets/images/index-recommend02.jpg">
                    </dt>
                    <dd class="flex1">
                        <p v-html="details.WarehouseIntroduction"></p>
                    </dd>
                </dl>
            </div>
            <!-- 基本信息 -->
            <div class="demand-detail-content">
                <div class="demand-detail-title">
                    <b>基本信息</b>
                </div>
                <table class="table table-recommend">
                    <tbody>
                        <tr>
                            <td>月台</td>
                            <td>{{details.Platform | Platform}}</td>
                            <td>服务范围</td>
                            <td>{{details.ServiceRange | ServiceRange }}</td>
                        </tr>
                        <tr>
                            <td>结构</td>
                            <td>{{details.BuildingStructure | BuildingStructure }}</td>
                            <td>库存类别</td>
                            <td>{{details.GoodsCategory | GoodsCategory}}</td>
                        </tr>
                        <tr>
                            <td>层高</td>
                            <td v-if='details.FloorHeight'>{{details.FloorHeight | FloorHeight}}</td>
                            <td v-else>{{'暂无'}}</td>
                            <td>安保系统</td>
                            <td>{{details.SecuritySystem | SecuritySystem}}</td>
                        </tr>
                        <tr>
                            <td>消防</td>
                            <td>{{details.FireFighting | FireFighting }}</td>
                            <td>消防系统</td>
                            <td>{{details.FireFightingSystem | FireFightingSystem}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </Card>
</div>
</template>

<script>
export default {
    data() {
        return {
            details: {},
            crumbItems: [{
                title: '仓库推荐列表',
                path: '/front/warehouseList'
            }],
            pageTitle: '仓库推荐详情',
            value3: 0,
            setting: {
                autoplay: false,
                autoplaySpeed: 2000,
                dots: "outside",
                radiusDot: false,
                trigger: "click",
                arrow: "hover"
            },
            warehouseImgs: [],
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            var self = this;

            this.axios
                .get("/api/warehouse/details/" + this.$route.params.guid)
                .then(function(res) {
                    let images = JSON.parse(res.PictContent || "[]");

                    for (let index = 0; index < 4; index++) {
                        if (images[index] && images[index].original) {
                            self.warehouseImgs.push({
                                url: images[index].original.url
                            });
                        }else{
                            self.warehouseImgs.push({
                                url: "/index-recommend02.jpg"
                            })
                        }
                    };

                    self.details = res;
                });
        }
    }
};
</script>


